<template>
  <div class="person">
    <h2>需求:当水温达到六十度,或水位达到80cm时候给服务器发送一个请求</h2>
    <h2>当前的水温:{{temp}}。C</h2>
    <h2>当前水位:{{height}}cm</h2>
    <button @click="changeTemp">touch me水温+10</button>
    <button @click="changeHeight">touch me change hegiht</button>
  </div>
</template>

<script lang="ts" setup name="Person">  //生效需要引入外部插件import VueSetupExtend  from 'vite-plugin-vue-setup-extend'
/**
 * @author
 * 基本类型响应式数据必须用ref
 * 若需要永固一个响应式对象层级不深ref，reactive都可以
 * 若需要一个响应式对哦哦行,并且层级较深推荐实用reactive
 */
import {watch,ref,watchEffect} from "vue";
let temp=ref(10)
let height=ref(0)

function changeTemp(){
  temp.value+=10
}
function changeHeight(){
  height.value+=10
}
//watch实现监视
// watch([temp,height],(value)=>{
//   //从value中获取最新的水温,水位
//   let [newTemp,newHeight]=value
//   // console.log(newTemp,newHeight)
//   //分支判断
//   if (newTemp>=60||newHeight>=80){
//     console.log('发起请求')
//   }
// })
//watchEffect直接回调 都能监听数据的变化（函数中用哪些属性就监听哪些属性 ）
watchEffect(()=>{
  if (temp.value>=60||height.value>=80){
    console.log("请求")
  }
})
</script>
<style>
button{
  margin: 5px;
}
body{
  background-color: pink;
}
li{
  font-size: 30px;
}
</style>